<template>
	<view class="chat-header-container" >
	
	</view>
</template>

<script setup lang="ts">
	import {
		TUIStore,
		StoreName,
		IConversationModel,
		TUITranslateService,
	} from '@tencentcloud/chat-uikit-engine';
	import { TUIGlobal } from '@tencentcloud/universal-api';
	import { onLoad } from '@dcloudio/uni-app';
	import { onMounted, onUnmounted, ref, watch } from '../../../adapter-vue';
	watch(() => props.groupInfo, (newVal) => {
		if (newVal?.name) {
			setChatHeaderContent(newVal.name)
		}
	}, { deep: true })
	const currentConversation = ref<IConversationModel>();
	const typingStatus = ref(false);
	
	const setChatHeaderContent = (content : string) => {
		const title = content || '云通信 IM'
		const fullTitle = props.groupInfo.onlineCount>0 ? `${title} (${props.groupInfo.onlineCount})` : title

		TUIGlobal?.setNavigationBarTitle({
			title: fullTitle
		}).catch(err => {
			console.error('设置标题失败:', err)
		})
	}
	

	const props = defineProps({
		headerExtensionList: Array,
		groupInfo: {
			type: Object,
			default: () => ({
				name: '',
				onlineCount: 0,
				totalCount: 0
			})
		}
	})


	onMounted(() => {
		TUIStore.watch(StoreName.CONV, {
			currentConversation: onCurrentConversationUpdated,
		});
		TUIStore.watch(StoreName.CHAT, {
			typingStatus: onTypingStatusUpdated,
		});
	});

	onUnmounted(() => {
		TUIStore.unwatch(StoreName.CONV, {
			currentConversation: onCurrentConversationUpdated,
		});
		TUIStore.unwatch(StoreName.CHAT, {
			typingStatus: onTypingStatusUpdated,
		});
	});

	onLoad(() => {
		setChatHeaderContent(currentConversation.value?.getShowName());
	});

	function onCurrentConversationUpdated(conversation : IConversationModel) {
		currentConversation.value = conversation;
		if (!typingStatus.value) {
			setChatHeaderContent(currentConversation?.value?.getShowName());
		}
	}

	function onTypingStatusUpdated(status : boolean) {
		typingStatus.value = status;
		if (typingStatus.value) {
			setChatHeaderContent(TUITranslateService.t('TUIChat.对方正在输入'));
		} else {
			setChatHeaderContent(currentConversation.value?.getShowName());
		}
	}
</script>
<style scoped>
	.chat-header-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 15px;
	}

	.group-title-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex-grow: 1;
	}

	.group-name {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 2px;
	}

	.online-count {
		font-size: 12px;
		color: #666;
	}
</style>